<!-- Page content -->
    <!-- page header -->
    <div class="pageheader">

        <h2><i class="fa fa-tachometer"></i> Dashboard
            <span>// Place subtitle here...</span></h2>

        <div class="breadcrumbs">
            <ol class="breadcrumb">
                <li>You are here</li>
                <li><a href="main">Minimal</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </div>
    </div>
    <!-- /page header -->
    <!-- content main container -->
    <div class="main">
        <!-- cards -->
        <div class="row cards">
            <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                <div class="card card-redbrown hover">
                    <div class="front">
                        <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-users media-object"></i>
                      </span>
                            <div class="media-body">
                                <small>New Users</small>
                                <h2 class="media-heading animate-number" data-value="3658"
                                    data-animation-duration="1500">0</h2>
                            </div>
                        </div>
                        <div class="progress-list">
                            <div class="details">
                                <div class="title">This month plan %</div>
                            </div>
                            <div class="status pull-right bg-transparent-black-1">
                                <span class="animate-number" data-value="83" data-animation-duration="1500">0</span>%
                            </div>
                            <div class="clearfix"></div>
                            <div class="progress progress-little progress-transparent-black">
                                <div class="progress-bar animate-progress-bar" data-percentage="83%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="back">
                        <a href="#">
                            <i class="fa fa-bar-chart-o fa-4x"></i>
                            <span>Check Summary</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                <div class="card card-blue hover">
                    <div class="front">
                        <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-shopping-cart media-object"></i>
                      </span>
                            <div class="media-body">
                                <small>New Orders</small>
                                <h2 class="media-heading animate-number" data-value="19214"
                                    data-animation-duration="1500">0</h2>
                            </div>
                        </div>
                        <div class="progress-list">
                            <div class="details">
                                <div class="title">This month plan %</div>
                            </div>
                            <div class="status pull-right bg-transparent-black-1">
                                <span class="animate-number" data-value="100" data-animation-duration="1500">0</span>%
                            </div>
                            <div class="clearfix"></div>
                            <div class="progress progress-little progress-transparent-black">
                                <div class="progress-bar animate-progress-bar" data-percentage="100%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="back">
                        <a href="#">
                            <i class="fa fa-bar-chart-o fa-4x"></i>
                            <span>Check Summary</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-container col-lg-3 col-sm-6 col-sm-12">
                <div class="card card-greensea hover">
                    <div class="front">
                        <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-usd media-object"></i>
                      </span>
                            <div class="media-body">
                                <small>Sales</small>
                                <h2 class="media-heading animate-number" data-value="169541"
                                    data-animation-duration="1500">0</h2>
                            </div>
                        </div>
                        <div class="progress-list">
                            <div class="details">
                                <div class="title">This month plan %</div>
                            </div>
                            <div class="status pull-right bg-transparent-black-1">
                                <span class="animate-number" data-value="42" data-animation-duration="1500">0</span>%
                            </div>
                            <div class="clearfix"></div>
                            <div class="progress progress-little progress-transparent-black">
                                <div class="progress-bar animate-progress-bar" data-percentage="42%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="back">
                        <a href="#">
                            <i class="fa fa-bar-chart-o fa-4x"></i>
                            <span>Check Summary</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-container col-lg-3 col-sm-6 col-xs-12">
                <div class="card card-slategray hover">
                    <div class="front">
                        <div class="media">
                      <span class="pull-left">
                        <i class="fa fa-eye media-object"></i>
                      </span>
                            <div class="media-body">
                                <small>Visits</small>
                                <h2 class="media-heading animate-number" data-value="9634"
                                    data-animation-duration="1500">0</h2>
                            </div>
                        </div>
                        <div class="progress-list">
                            <div class="details">
                                <div class="title">This month plan %</div>
                            </div>
                            <div class="status pull-right bg-transparent-black-1">
                                <span class="animate-number" data-value="25" data-animation-duration="1500">0</span>%
                            </div>
                            <div class="clearfix"></div>
                            <div class="progress progress-little progress-transparent-black">
                                <div class="progress-bar animate-progress-bar" data-percentage="25%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="back">
                        <a href="#">
                            <i class="fa fa-bar-chart-o fa-4x"></i>
                            <span>Check Summary</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /cards -->
        <!-- row -->
        <div class="row">
            <!-- col 8 -->
            <div class="col-lg-8 col-md-12">
                <!-- tile -->
                <section class="tile transparent">
                    <!-- tile header -->
                    <div class="tile-header color transparent-black textured rounded-top-corners">
                        <h1><strong>Statistic</strong> Chart</h1>
                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->
                    <!-- tile widget -->
                    <div class="tile-widget color transparent-black textured">
                        <div id="statistics-chart" class="chart statistics" style="height: 250px;"></div>
                    </div>
                    <!-- /tile widget -->
                    <!-- tile body -->
                    <div class="tile-body color transparent-white rounded-bottom-corners">
                        <div class="row">
                            <ul class="inline">
                                <li class="col-md-8 col-sm-12 col-xs-12 text-center">
                                    <h4 class="underline text-left"><strong>Actual</strong> Statistics</h4>
                                    <div class="inner-container inline">
                                        <div data-percent="100" data-size="140" class="pie-chart inline"
                                             data-scale-color="false" data-track-color="rgba(0,0,0,0)"
                                             data-bar-color="#ffffff" data-line-width="5">
                                            <div class="text-center">
                                                <i class="fa fa-usd fa-5x"></i>
                                            </div>
                                        </div>
                                        <p class="chart-overall text-center medium-thin uppercase"><span
                                                class="big-medium animate-number" data-value="6175"
                                                data-animation-duration="2500">0</span> Sales</p>
                                    </div>
                                    <div class="inner-container inline">
                                        <div data-percent="85" data-size="140" class="pie-chart inline"
                                             data-scale-color="false" data-track-color="rgba(0,0,0,0)"
                                             data-bar-color="rgba(0,0,0,.4)" data-line-width="5">
                                            <div class="text-center">
                                                <span><i class="fa fa-eye fa-5x color-transparent-black"></i></span>
                                            </div>
                                        </div>
                                        <p class="chart-overall text-center medium-thin uppercase color-transparent-black">
                                            <span class="big-medium animate-number" data-value="8213"
                                                  data-animation-duration="2500">0</span> Visits</p>
                                    </div>
                                </li>
                                <li class="col-md-4 col-sm-12 col-xs-12">
                                    <h4 class="underline"><strong>Visitors</strong> Statistics</h4>
                                    <ul class="progress-list">
                                        <li>
                                            <div class="details">
                                                <div class="title">America</div>
                                                <div class="description">Visitors from America</div>
                                            </div>
                                            <div class="status pull-right">
                                                <span class="animate-number" data-value="40"
                                                      data-animation-duration="1500">0</span>%
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="progress progress-little">
                                                <div class="progress-bar progress-bar-green animate-progress-bar"
                                                     data-percentage="40%" style="width: 0%;"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="details">
                                                <div class="title">Europe</div>
                                                <div class="description">Visitors from Europe</div>
                                            </div>
                                            <div class="status pull-right">
                                                <span class="animate-number" data-value="38"
                                                      data-animation-duration="1000">0</span>%
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="progress progress-little">
                                                <div class="progress-bar progress-bar-cyan animate-progress-bar"
                                                     data-percentage="35%" style="width: 0%;"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="details">
                                                <div class="title">Asia</div>
                                                <div class="description">Visitors from Asia</div>
                                            </div>
                                            <div class="status pull-right">
                                                <span class="animate-number" data-value="12"
                                                      data-animation-duration="800">0</span>%
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="progress progress-little">
                                                <div class="progress-bar progress-bar-amethyst animate-progress-bar"
                                                     data-percentage="12%" style="width: 0%;"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="details">
                                                <div class="title">Africa</div>
                                                <div class="description">Visitors from Africa</div>
                                            </div>
                                            <div class="status pull-right">
                                                <span class="animate-number" data-value="7"
                                                      data-animation-duration="600">0</span>%
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="progress progress-little">
                                                <div class="progress-bar progress-bar-orange animate-progress-bar"
                                                     data-percentage="7%" style="width: 0%;"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="details">
                                                <div class="title">Other</div>
                                            </div>
                                            <div class="status pull-right">
                                                <span class="animate-number" data-value="6"
                                                      data-animation-duration="400">0</span>%
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="progress progress-little">
                                                <div class="progress-bar progress-bar-red animate-progress-bar"
                                                     data-percentage="6%" style="width: 0%;"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- /tile body -->
                </section>
                <!-- /tile -->
                <!-- tile -->
                <section class="tile color transparent-black">
                    <!-- tile header -->
                    <div class="tile-header">
                        <h1><strong>Projects</strong> Progress</h1>

                        <div class="search">
                            <input type="text" placeholder="Search...">
                        </div>
                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->
                    <!-- tile body -->
                    <div class="tile-body no-vpadding">
                        <div class="table-responsive">
                            <table class="table table-custom table-sortable nomargin">
                                <thead>
                                <tr>
                                    <th class="sortable sort-numeric sort-asc">ID</th>
                                    <th class="sortable sort-alpha">Project</th>
                                    <th class="sortable">Priority</th>
                                    <th class="sortable sort-amount">Status</th>
                                    <th class="text-right">Chart</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Graphic Layout for client</td>
                                    <td class="color-red priority">High priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="50"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="50%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar1">87,85,42,90,70,55,82,68</span></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Make website responsive</td>
                                    <td class="color-green priority">Low priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="13"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="13%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar2">87,99,52,93,42,86,51,93</span></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Clean css/html/js code</td>
                                    <td class="color-red priority">High priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="76"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="76%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar3">74,77,82,91,69,63,46,42</span></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Database Optimization</td>
                                    <td class="color-orange priority">Normal priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="38"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="38%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar4">52,45,76,74,77,57,65,86</span></td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Database Migration</td>
                                    <td class="color-green priority">Low priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="9"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="9%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar5">53,70,47,96,62,49,69,55</span></td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>Email server backup</td>
                                    <td class="color-orange priority">Normal priority</td>
                                    <td class="progress-cell">
                                        <div class="progress-info">
                                            <div class="percent"><span class="animate-number" data-value="29"
                                                                       data-animation-duration="1500">0</span>%
                                            </div>
                                        </div>
                                        <div class="progress progress-little">
                                            <div class="progress-bar progress-bar-transparent-white animate-progress-bar"
                                                 data-percentage="29%"></div>
                                        </div>
                                    </td>
                                    <td class="text-right"><span id="projectbar6">69,80,85,96,67,58,75,82</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /tile body -->
                    <!-- tile footer -->
                    <div class="tile-footer text-center">
                        <ul class="pagination pagination-sm nomargin pagination-custom">
                            <li class="disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#"><i class="fa fa-angle-double-right"></i></a></li>
                        </ul>
                    </div>
                    <!-- /tile footer -->
                </section>
                <!-- /tile -->
            </div>
            <!-- /col 8 -->
            <!-- col 4 -->
            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
                <!-- tile -->
                <section class="tile color transparent-black textured">
                    <!-- tile header -->
                    <div class="tile-header">
                        <h1><strong>Server</strong> Load</h1>

                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->

                    <!-- tile widget -->
                    <div class="tile-widget">

                        <div class="progress-list with-heading">
                            <div class="details">
                                <div class="title"><h2><i class="fa fa-hdd-o"></i> <span class="animate-number"
                                                                                         data-value="394"
                                                                                         data-animation-duration="1600">0</span>
                                    GB</h2></div>
                            </div>
                            <div class="status pull-right bg-transparent-black-1">
                                <span class="animate-number" data-value="42" data-animation-duration="1500">0</span>%
                            </div>
                            <div class="clearfix"></div>
                            <div class="progress progress-little progress-transparent-black" style="margin-bottom: 5px">
                                <div class="progress-bar animate-progress-bar" data-percentage="42%"></div>
                            </div>
                        </div>
                        <p class="description"><strong>394GB</strong> used of <strong
                                class="white-text">2,048GB</strong> on File Server</p>
                    </div>
                    <!-- /tile widget -->


                    <!-- tile body -->
                    <div class="tile-body paddingtop">
                        <div id="serverload-chart"></div>
                    </div>
                    <!-- /tile body -->


                </section>
                <!-- /tile -->


                <!-- tile -->
                <section class="tile color transparent-black">


                    <!-- tile header -->
                    <div class="tile-header">
                        <h1><strong>Browser</strong> Usage</h1>

                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body">
                        <div id="browser-usage" style="height: 230px;" class="morris-chart"></div>
                        <ul class="inline text-center chart-legend">
                            <li><span class="badge badge-outline" style="border-color: #00a3d8"></span> Chrome
                                <small>25%</small>
                                ,
                            </li>
                            <li><span class="badge badge-outline" style="border-color: #1693A5"></span> Other
                                <small>25%</small>
                                ,
                            </li>
                            <li><span class="badge badge-outline" style="border-color: #2fbbe8"></span> Safari
                                <small>20%</small>
                                ,
                            </li>
                            <li><span class="badge badge-outline" style="border-color: #72cae7"></span> Firefox
                                <small>15%</small>
                                ,
                            </li>
                            <li><span class="badge badge-outline" style="border-color: #ffc100"></span> Internet
                                Explorer
                                <small>10%</small>
                                ,
                            </li>
                            <li><span class="badge badge-outline" style="border-color: #d9544f"></span> Opera
                                <small>5%</small>
                            </li>
                        </ul>
                    </div>
                    <!-- /tile body -->


                </section>
                <!-- /tile -->


                <!-- tile -->
                <section class="tile transparent">


                    <!-- tile header -->
                    <div class="tile-header color redbrown rounded-top-corners text-center">
                        <button class="btn pull-left btn-black-transparent" type="button"><i
                                class="fa fa-caret-square-o-down"></i></button>
                        <h2><strong>Todo</strong> List</h2>

                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->

                    <!-- tile body -->
                    <div class="tile-body color transparent-black rounded-bottom-corners">
                        <input type="text" placeholder="Add new todo..." class="w100p bottommargin">
                        <ul class="nolisttypes" id="todolist">
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="todo-01">
                                    <label for="todo-01">Make a backup</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" checked="checked" value="1" id="todo-02">
                                    <label for="todo-02" class="done">Send e-mail to Ici</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="todo-03">
                                    <label for="todo-03">Buy tickets</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="todo-04">
                                    <label for="todo-04">Resolve issues</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="todo-05">
                                    <label for="todo-05">Compile new version</label>
                                </div>
                            </li>
                            <li>
                                <div class="checkbox check-transparent">
                                    <input type="checkbox" value="1" id="todo-06">
                                    <label for="todo-06">Upload new version</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- /tile body -->


                </section>
                <!-- /tile -->


            </div>
            <!-- /col 4 -->


        </div>
        <!-- /row -->


        <!-- row -->
        <div class="row">


            <!-- col 6 -->
            <div class="col-md-6">


                <!-- tile -->
                <section class="tile transparent recent-activity">


                    <!-- tile header -->
                    <div class="tile-header transparent">
                        <h1><strong>Recent</strong> Activity</h1>

                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->


                    <!-- tile widget -->
                    <div class="tile-widget color transparent-black rounded-top-corners nopadding">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs tabdrop">
                            <li class="active"><a href="#users-tab" data-toggle="tab">Users</a></li>
                            <li><a href="#orders-tab" data-toggle="tab">Orders</a></li>
                            <li><a href="#messages-tab" data-toggle="tab">Messages</a></li>
                            <li><a href="#tasks-tab" data-toggle="tab">Tasks</a></li>
                            <li><a href="#comments-tab" data-toggle="tab">Comments</a></li>
                        </ul>
                        <!-- / Nav tabs -->
                    </div>
                    <!-- /tile widget -->


                    <!-- tile body -->
                    <div class="tile-body tab-content nopadding rounded-bottom-corners">
                        <!-- Tab panes -->

                        <ul id="users-tab" class="tab-pane fade in active">
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">has been <strong>unbanned</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 15 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">has been <strong>unbanned</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 1 hour ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">has been <strong>banned</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 2 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/ici-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Ing. Imrich <strong>Kamarel</strong></span>
                                <span class="subject">has been <strong>updated</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 4 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">has been <strong>registered</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 8 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">has been <strong>banned</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 12 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">has been <strong>registered</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> yesterday</span>
                            </li>
                        </ul>

                        <ul id="orders-tab" class="tab-pane fade">
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">send new order <strong>OR_00012014</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 15 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/george-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">George <strong>McCain</strong></span>
                                <span class="subject">change order <strong>OR_02172013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 27 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/george-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">George <strong>McCain</strong></span>
                                <span class="subject">send new order <strong>OR_02172013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 35 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">cancelled order <strong>OR_02162013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 2 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">send new order <strong>OR_02162013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 3 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/ici-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Ing. Imrich <strong>Kamarel</strong></span>
                                <span class="subject">send new order <strong>OR_02152013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 5 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/ici-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Ing. Imrich <strong>Kamarel</strong></span>
                                <span class="subject">send new order <strong>OR_02142013</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 5 hours ago</span>
                            </li>
                        </ul>

                        <ul id="messages-tab" class="tab-pane fade">
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Peter Kay</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 15 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Peter Kay</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 30 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Ing. Imrich
                                    Kamarel</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 35 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Arnold Arnold</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 42 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>George McCain</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 1 hour ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Ing. Imrich
                                    Kamarel</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 1 hour ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">received new message from <strong>Ing. Imrich
                                    Kamarel</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 1 hour ago</span>
                            </li>
                        </ul>

                        <ul id="tasks-tab" class="tab-pane fade">
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">cancelled task <strong>Get drunk</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 15 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">finished task <strong>Gifts!</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 59 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">finished task <strong>Make backup</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 3 hours ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">have a new task <strong>Gifts!</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> yesterday</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">finished task <strong>Send emails</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> yesterday</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">have a new task <strong>Send emails</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> yesterday</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab"><strong>You</strong></span>
                                <span class="subject">have a new task <strong>Make backup</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> yesterday</span>
                            </li>
                        </ul>

                        <ul id="comments-tab" class="tab-pane fade">
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">deleted comment <strong>CM_00019</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 5 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Arnold <strong>Karlsberg</strong></span>
                                <span class="subject">posted a new comment <strong>CM_00019</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 8 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab">John <strong>Douey</strong></span>
                                <span class="subject">posted a new comment <strong>CM_00018</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 9 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/peter-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Peter <strong>Kay</strong></span>
                                <span class="subject">posted a new comment <strong>CM_00017</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 18 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Ing. Imrich <strong>Kamarel</strong></span>
                                <span class="subject">updated comment <strong>CM_00016</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 25 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/arnold-avatar.jpg" class="w35" alt>
                                <span class="user font-slab">Ing. Imrich <strong>Kamarel</strong></span>
                                <span class="subject">posted a new comment <strong>CM_00016</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 42 minutes ago</span>
                            </li>
                            <li>
                                <img src="js/minimal/assets/images/profile-photo.jpg" class="w35" alt>
                                <span class="user font-slab">John <strong>Douey</strong></span>
                                <span class="subject">posted a new comment <strong>CM_00015</strong></span>
                                <span class="time"><i class="fa fa-clock-o"></i> 56 minutes ago</span>
                            </li>
                        </ul>

                        <!-- / Tab panes -->
                    </div>
                    <!-- /tile body -->


                </section>
                <!-- /tile -->


            </div>
            <!-- /col 6 -->


            <!-- col 6 -->
            <div class="col-md-6">


                <!-- tile -->
                <section class="tile transparent">


                    <!-- tile header -->
                    <div class="tile-header transparent">
                        <h1><strong>Quick</strong> Message</h1>

                        <div class="controls">
                            <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                            <a href="#" class="remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- /tile header -->


                    <!-- tile widget -->
                    <div class="tile-widget color transparent-black rounded-top-corners">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="message-to" class="col-sm-2 control-label font-slab">Recipients</label>

                                <div class="col-sm-10">
                                    <select data-placeholder="Select recipients..." multiple="" tabindex="3"
                                            class="chosen-select form-control chosen-transparent" id="message-to">
                                        <option value="http://tattek.com/minimal/ici@gmail.com">ici@gmail.com</option>
                                        <option value="http://tattek.com/minimal/johny@gmail.com">johny@gmail.com
                                        </option>
                                        <option value="http://tattek.com/minimal/arnie@gmail.com">arnie@gmail.com
                                        </option>
                                        <option value="http://tattek.com/minimal/pete@gmail.com">pete@gmail.com</option>
                                        <option value="http://tattek.com/minimal/gorge@gmail.com">gorge@gmail.com
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group no-bottom-margin">
                                <label for="subject" class="col-sm-2 control-label font-slab">Subject</label>

                                <div class="col-sm-10">
                                    <input type="text" class="form-control transparent" id="subject"
                                           placeholder="Type subject here...">
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /tile widget -->


                    <!-- tile body -->
                    <div class="tile-body nopadding">
                        <div id="quick-message-content"></div>
                    </div>
                    <!-- /tile body -->


                    <!-- tile footer -->
                    <div class="tile-footer rounded-bottom-corners text-right">
                        <a class="submit font-slab" href="#"><strong>Send</strong> message <i class="fa fa-comment"></i></a>
                    </div>
                    <!-- /tile footer -->


                </section>
                <!-- /tile -->


            </div>
            <!-- /col 6 -->


        </div>
        <!-- /row -->


    </div>
    <!-- /content container -->
<script type="text/javascript">
    // Initialize card flip
    $('.card.hover').hover(function(){
        $(this).addClass('flip');
    },function(){
        $(this).removeClass('flip');
    });

    // Initialize flot chart
    var d1 =[ [1, 715],
        [2, 985],
        [3, 1525],
        [4, 1254],
        [5, 1861],
        [6, 2621],
        [7, 1987],
        [8, 2136],
        [9, 2364],
        [10, 2851],
        [11, 1546],
        [12, 2541]
    ];
    var d2 =[ [1, 463],
        [2, 578],
        [3, 327],
        [4, 984],
        [5, 1268],
        [6, 1684],
        [7, 1425],
        [8, 1233],
        [9, 1354],
        [10, 1200],
        [11, 1260],
        [12, 1320]
    ];
    var months = ["January", "February", "March", "April", "May", "Juny", "July", "August", "September", "October", "November", "December"];

    // flot chart generate
    var plot = $.plotAnimator($("#statistics-chart"),
            [
                {
                    label: 'Sales',
                    data: d1,
                    lines: {lineWidth:3},
                    shadowSize:0,
                    color: '#ffffff'
                },
                { label: "Visits",
                    data: d2,
                    animator: {steps: 99, duration: 500, start:200, direction: "right"},
                    lines: {
                        fill: .15,
                        lineWidth: 0
                    },
                    color:['#ffffff']
                },{
                label: 'Sales',
                data: d1,
                points: { show: true, fill: true, radius:6,fillColor:"rgba(0,0,0,.5)",lineWidth:2 },
                color: '#fff',
                shadowSize:0
            },
                { label: "Visits",
                    data: d2,
                    points: { show: true, fill: true, radius:6,fillColor:"rgba(255,255,255,.2)",lineWidth:2 },
                    color: '#fff',
                    shadowSize:0
                }
            ],{

                xaxis: {

                    tickLength: 0,
                    tickDecimals: 0,
                    min:1,
                    ticks: [[1,"JAN"], [2, "FEB"], [3, "MAR"], [4, "APR"], [5, "MAY"], [6, "JUN"], [7, "JUL"], [8, "AUG"], [9, "SEP"], [10, "OCT"], [11, "NOV"], [12, "DEC"]],

                    font :{
                        lineHeight: 24,
                        weight: "300",
                        color: "#ffffff",
                        size: 14
                    }
                },

                yaxis: {
                    ticks: 4,
                    tickDecimals: 0,
                    tickColor: "rgba(255,255,255,.3)",

                    font :{
                        lineHeight: 13,
                        weight: "300",
                        color: "#ffffff"
                    }
                },

                grid: {
                    borderWidth: {
                        top: 0,
                        right: 0,
                        bottom: 1,
                        left: 1
                    },
                    borderColor: 'rgba(255,255,255,.3)',
                    margin:0,
                    minBorderMargin:0,
                    labelMargin:20,
                    hoverable: true,
                    clickable: true,
                    mouseActiveRadius:6
                },

                legend: { show: false}
            });

    $(window).resize(function() {
        // redraw the graph in the correctly sized div
        plot.resize();
        plot.setupGrid();
        plot.draw();
    });

    $('#mmenu').on(
            "opened.mm",
            function()
            {
                // redraw the graph in the correctly sized div
                plot.resize();
                plot.setupGrid();
                plot.draw();
            }
    );

    $('#mmenu').on(
            "closed.mm",
            function()
            {
                // redraw the graph in the correctly sized div
                plot.resize();
                plot.setupGrid();
                plot.draw();
            }
    );

    // tooltips showing
    $("#statistics-chart").bind("plothover", function (event, pos, item) {
        if (item) {
            var x = item.datapoint[0],
                    y = item.datapoint[1];

            $("#tooltip").html('<h1 style="color: #418bca">' + months[x - 1] + '</h1>' + '<strong>' + y + '</strong>' + ' ' + item.series.label)
                    .css({top: item.pageY-30, left: item.pageX+5})
                    .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }
    });


    //tooltips options
    $("<div id='tooltip'></div>").css({
        position: "absolute",
        //display: "none",
        padding: "10px 20px",
        "background-color": "#ffffff",
        "z-index":"99999"
    }).appendTo("body");

    //generate actual pie charts
    $('.pie-chart').easyPieChart();


    //server load rickshaw chart
    var graph;

    var seriesData = [ [], []];
    var random = new Rickshaw.Fixtures.RandomData(50);

    for (var i = 0; i < 50; i++) {
        random.addData(seriesData);
    }

    graph = new Rickshaw.Graph( {
        element: document.querySelector("#serverload-chart"),
        height: 150,
        renderer: 'area',
        series: [
            {
                data: seriesData[0],
                color: '#6e6e6e',
                name:'File Server'
            },{
                data: seriesData[1],
                color: '#fff',
                name:'Mail Server'
            }
        ]
    } );

    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: graph,
    });

    setInterval( function() {
        random.removeData(seriesData);
        random.addData(seriesData);
        graph.update();

    },1000);

    // Morris donut chart
    Morris.Donut({
        element: 'browser-usage',
        data: [
            {label: "Chrome", value: 25},
            {label: "Safari", value: 20},
            {label: "Firefox", value: 15},
            {label: "Opera", value: 5},
            {label: "Internet Explorer", value: 10},
            {label: "Other", value: 25}
        ],
        colors: ['#00a3d8', '#2fbbe8', '#72cae7', '#d9544f', '#ffc100', '#1693A5']
    });

    $('#browser-usage').find("path[stroke='#ffffff']").attr('stroke', 'rgba(0,0,0,0)');

    //sparkline charts
    $('#projectbar1').sparkline('html', {type: 'bar', barColor: '#22beef', barWidth: 4, height: 20});
    $('#projectbar2').sparkline('html', {type: 'bar', barColor: '#cd97eb', barWidth: 4, height: 20});
    $('#projectbar3').sparkline('html', {type: 'bar', barColor: '#a2d200', barWidth: 4, height: 20});
    $('#projectbar4').sparkline('html', {type: 'bar', barColor: '#ffc100', barWidth: 4, height: 20});
    $('#projectbar5').sparkline('html', {type: 'bar', barColor: '#ff4a43', barWidth: 4, height: 20});
    $('#projectbar6').sparkline('html', {type: 'bar', barColor: '#a2d200', barWidth: 4, height: 20});

    // sortable table
    $('.table.table-sortable th.sortable').click(function() {
        var o = $(this).hasClass('sort-asc') ? 'sort-desc' : 'sort-asc';
        $('th.sortable').removeClass('sort-asc').removeClass('sort-desc');
        $(this).addClass(o);
    });

    //todo's
    $('#todolist li label').click(function() {
        $(this).toggleClass('done');
    });

    // Initialize tabDrop
    $('.tabdrop').tabdrop({text: '<i class="fa fa-th-list"></i>'});

    //load wysiwyg editor
    $('#quick-message-content').summernote({
        toolbar: [
            //['style', ['style']], // no style button
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            //['insert', ['picture', 'link']], // no insert buttons
            //['table', ['table']], // no table button
            //['help', ['help']] //no help button
        ],
        height: 143   //set editable area's height
    });

    //multiselect input
    $(".chosen-select").chosen({disable_search_threshold: 10});
</script>